<template>
  <div class="top-select">
    <el-card class="product-header" style="margin-bottom: 20px">
      <div class="condition-header">
        <el-row style="margin-bottom: 20px" v-if="isFamily===1">
          <el-col :span="3"
                  style="font-size: 16px;color: #333;font-weight: bold;font-family: OpenSans-CondensedBold;position: relative;top: 7px">
            Products:
          </el-col>
          <el-col :span="21">
            <div style="display: flex;align-items: center" class="condition-header-right">
              <div class="select-box" v-show="addFlag>=1">
                <mySelect
                  :options="familyAllOptions"
                  v-model="familyValue3"
                  :placeholder="$t('productLifeCycle.Select')"
                  @change="familyChange3">
                </mySelect>
              </div>
              <transition name="el-fade-in-linear">
                <div v-show="addFlag>=2" class="select-box">
                  <mySelect
                    :options="familyAllOptions"
                    v-model="familyValue4"
                    :placeholder="$t('productLifeCycle.Select')"
                    @change="familyChange4">
                  </mySelect>
                </div>
              </transition>
              <transition name="el-fade-in-linear">
                <div v-show="addFlag>=3" class="select-box">
                  <mySelect
                    :options="familyAllOptions"
                    v-model="familyValue5"
                    :placeholder="$t('productLifeCycle.Select')"
                    @change="familyChange5">
                  </mySelect>
                </div>
              </transition>
              <transition name="el-fade-in-linear">
                <div v-show="addFlag>=4" class="select-box">
                  <mySelect
                    :options="familyAllOptions"
                    v-model="familyValue6"
                    :placeholder="$t('productLifeCycle.Select')"
                    @change="familyChange6">
                  </mySelect>
                </div>
              </transition>
              <transition name="el-fade-in-linear">
                <div v-show="addFlag>=5" class="select-box">
                  <mySelect
                    :options="familyAllOptions"
                    v-model="familyValue7"
                    :placeholder="$t('productLifeCycle.Select')"
                    @change="familyChange7">
                  </mySelect>
                </div>
              </transition>
              <div class="add-button" @click="addProducts" style="margin-right: 15px">
                <el-button type="primary">
                  添加产品
                </el-button>
              </div>
              <!--<div class="condition-button" style="margin-right: 15px">-->
              <!--<a href="javascript:;" @click="conditionIsShowChange">按条件筛选</a>-->
              <!--</div>-->
              <div class="confirm-button">
                <el-button type="primary" @click="confirmData">
                  {{$t('productLifeCycle.OK')}}
                </el-button>
              </div>
              <span v-show="addFlag===1" style="margin-left: 10px;font-size: 14px;color: #999999">最多添加五个产品</span>
            </div>
          </el-col>
        </el-row>
        <el-row v-else style="margin-bottom: 20px">
          <el-col :span="6"
                  style="font-size: 16px;color: #333;font-weight: bold;font-family: OpenSans-CondensedBold;position: relative;top: 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
            {{$t('productLifeCycle.familyOrShipment')}}
          </el-col>
          <el-col :span="17">
            <div style="display: flex;align-items: center" class="condition-header-right">
              <div class="select-one" style="margin-right: 10px">
                <mySelect
                  :options="familyOptions1"
                  v-model="familyValue1"
                  :placeholder="$t('productLifeCycle.Select')"
                  @change="familyChange1">
                </mySelect>
              </div>
              <transition name="el-fade-in-linear">
                <div class="select-two" v-show="vsIsShow" style="margin-right: 15px;display: flex;align-items: center">
                  <div style="display: inline-block">
                    <span style="margin-right: 10px">VS</span>
                  </div>
                  <div style="display: inline-block" class="select-two-vs">
                    <mySelect
                      :options="familyOptions2"
                      v-model="familyValue2"
                      :placeholder="$t('productLifeCycle.Select')"
                      @change="familyChange2">
                    </mySelect>
                  </div>
                </div>
              </transition>
              <div class="vs-button" @click="vsIsShowChange" style="margin-right: 15px">
                <el-button type="primary">
                  {{!vsIsShow ? $t('productLifeCycle.addContrast') : $t('productLifeCycle.CanContrast')}}
                </el-button>
              </div>
              <!--<div class="condition-button" style="margin-right: 15px">-->
              <!--<a href="javascript:;" @click="conditionIsShowChange">按条件筛选</a>-->
              <!--</div>-->
              <div class="confirm-button">
                <el-button type="primary" @click="confirmData">
                  {{$t('productLifeCycle.OK')}}
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-collapse-transition>
        <div class="condition-box" v-show="conditionIsShow">
          <el-row style="margin-bottom: 10px">
            <el-col :span="3">
              {{$t('productLifeCycle.Configuration')}}：
            </el-col>
            <el-col :span="21">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-select
                    v-model="configuration.cpuVendorValues"
                    @change="cpuVendorChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.CPUVender')"
                  >
                    <el-option
                      v-for="item in configuration.cpuVendorOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.cpuSeriesValues"
                    @change="cpuSeriesChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.CPUSeries')"
                  >
                    <el-option
                      v-for="item in configuration.cpuSeriesOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.memoryCapacityValues"
                    @change="memoryCapacityChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.MemoryCapacity')"
                  >
                    <el-option
                      v-for="item in configuration.memoryCapacityOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.osFamilyValues"
                    @change="osFamilyChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.OSFamily')"
                  >
                    <el-option
                      v-for="item in configuration.osFamilyOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.storageTypeValues"
                    @change="storageTypeChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.StorageType')"
                  >
                    <el-option
                      v-for="item in configuration.storageTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.hddCapacityValues"
                    @change="hddCapacityChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.HddCapacity')"
                  >
                    <el-option
                      v-for="item in configuration.hddCapacityOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.ssdCapacityValues"
                    @change="ssdCapacityChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.SSDCapacity')"
                  >
                    <el-option
                      v-for="item in configuration.ssdCapacityOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.panelSizeValues"
                    @change="panelSizeChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.PanelSize')"
                  >
                    <el-option
                      v-for="item in configuration.panelSizeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.panelAspectRatioValues"
                    @change="panelAspectRatioChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.PanelAspectRatio')"
                  >
                    <el-option
                      v-for="item in configuration.panelAspectRatioOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="configuration.panelResolutionValues"
                    @change="panelResolutionChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.PanelResolution')"
                  >
                    <el-option
                      v-for="item in configuration.panelResolutionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 10px">
            <el-col :span="3">
              {{$t('productLifeCycle.Location')}}：
            </el-col>
            <el-col :span="21">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.geoValues"
                    @change="geoChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.Geo')"
                  >
                    <el-option
                      v-for="item in locationBp.geoOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.smbRegionValues"
                    @change="smbRegionChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.SmbRegion')"
                  >
                    <el-option
                      v-for="item in locationBp.smbRegionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.ebrRegionValues"
                    @change="ebrRegionChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.EbrRegion')"
                  >
                    <el-option
                      v-for="item in locationBp.ebrRegionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.countryValues"
                    @change="countryChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.Country')"
                  >
                    <el-option
                      v-for="item in locationBp.countryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.countryNameValues"
                    @change="countryNameChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.CountryName')"
                  >
                    <el-option
                      v-for="item in locationBp.countryNameOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.smbSegmentValues"
                    @change="smbSegmentChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.SmbSegment')"
                  >
                    <el-option
                      v-for="item in locationBp.smbSegmentOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.ebrSegmentValues"
                    @change="ebrSegmentChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.EbrSegment')"
                  >
                    <el-option
                      v-for="item in locationBp.ebrSegmentOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="locationBp.channelValues"
                    @change="channelChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.Channel')"
                  >
                    <el-option
                      v-for="item in locationBp.channelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <myInput
                    @getInputData="getInputData1"
                    :placeholder="$t('productLifeCycle.SoldToName')">
                  </myInput>
                  <!--<el-input-->
                  <!--:placeholder="$t('productLifeCycle.SoldToName')"-->
                  <!--v-model="locationBp.soldToNameValue"-->
                  <!--@change="soldToNameChange"-->
                  <!--clearable>-->
                  <!--</el-input>-->
                </el-col>
                <el-col :span="4">
                  <myInput
                    @getInputData="getInputData2"
                    inputName="end_customer"
                    :placeholder="$t('productLifeCycle.EndCustomerName')">
                  </myInput>
                  <!--<el-input-->
                  <!--:placeholder="$t('productLifeCycle.EndCustomerName')"-->
                  <!--v-model="locationBp.endCustomerNameValue"-->
                  <!--@change="endCustomerNameChange"-->
                  <!--clearable>-->
                  <!--</el-input>-->
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 10px">
            <el-col :span="3">
              {{$t('productLifeCycle.DeviceModel')}}：
            </el-col>
            <el-col :span="21">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-select
                    v-model="deviceModel.finalBuValues"
                    @change="finalBuChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.FinalBu')"
                  >
                    <el-option
                      v-for="item in deviceModel.finalBuOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="deviceModel.smbSeriesValues"
                    @change="smbSeriesChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.SmbSeries')"
                  >
                    <el-option
                      v-for="item in deviceModel.smbSeriesOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="other.brandValues"
                    @change="brandChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.Brand')"
                  >
                    <el-option
                      v-for="item in other.brandOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 10px">
            <el-col :span="3">
              {{$t('productLifeCycle.Other')}}：
            </el-col>
            <el-col :span="21">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-select
                    v-model="other.formFactorValues"
                    @change="formFactorChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.FormFactor')"
                  >
                    <el-option
                      v-for="item in other.formFactorOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="other.subFormFactorValues"
                    @change="subFormFactorChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.SubFormFactor')"
                  >
                    <el-option
                      v-for="item in other.subFormFactorOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="other.priceBandValues"
                    @change="priceBandChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.PriceBand')"
                  >
                    <el-option
                      v-for="item in other.priceBandOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="other.warrantyMonthValues"
                    @change="warrantyMonthChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('productLifeCycle.WarrantyMonth')"
                  >
                    <el-option
                      v-for="item in other.warrantyMonthOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              {{$t('productLifeCycle.Operation')}}：
            </el-col>
            <el-col :span="21">
              <el-button type="primary" @click="clearAll">
                {{$t('productLifeCycle.clear')}}
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
      <div class="footer-icon" @click="conditionIsShowChange">
        <i :class="[!conditionIsShow?'el-icon-caret-bottom':'el-icon-caret-top']">
          {{!conditionIsShow ? $t('productLifeCycle.addCriteria') : ''}} </i>
      </div>
    </el-card>
  </div>
</template>

<script>
  import mySelect from './mySelect.vue'
  import myInput from './myInput.vue'
  export default {
    data(){
      return {
//          isFamily:0,
        addFlag: 1,
        conditionIsShow: false,
        vsIsShow: false,
        selectOne: {
          options: [],
          value: []
        },
        selectTwo: {
          options: [],
          value: []
        },
//          progressDataOne: 50,
//          progressDataTwo: 70,
//          progressVsDataOne: 60,
//          progressVsDataTwo: 80,
        familyAllOptions: [],
        familyAllOptions2: [],
        shipmentFamilyAllOptions: [],
        familyOptions1: [],
        familyOptions2: [],

        familyOptions6: [],
        familyOptions7: [],
        familyOptions3: [],
        familyOptions4: [],
        familyOptions5: [],
        familyArr: [],
        familyShipmentArr: [],
        familyValue1: '',
        familyValue2: '',

        familyValue3: '',
        familyValue4: '',
        familyValue5: '',
        familyValue6: '',
        familyValue7: '',
        familyValues: ['', '', '', '', ''],
        configuration: {
          cpuVendorOptions: [],
          cpuVendorValues: [],
          storageTypeOptions: [],
          storageTypeValues: [],
          ssdCapacityOptions: [],
          ssdCapacityValues: [],
          panelResolutionOptions: [],
          panelResolutionValues: [],
          osFamilyOptions: [],
          osFamilyValues: [],
          hddCapacityOptions: [],
          hddCapacityValues: [],
          cpuSeriesOptions: [],
          cpuSeriesValues: [],
          panelAspectRatioOptions: [],
          panelAspectRatioValues: [],
          memoryCapacityOptions: [],
          memoryCapacityValues: [],
          panelSizeOptions: [],
          panelSizeValues: [],
        },
        locationBp: {
          geoOptions: [],
          geoValues: [],
          countryOptions: [],
          countryValues: [],
          ebrRegionOptions: [],
          ebrRegionValues: [],
          smbSegmentOptions: [],
          smbSegmentValues: [],
          smbRegionOptions: [],
          smbRegionValues: [],
          countryNameOptions: [],
          countryNameValues: [],
          channelOptions: [],
          channelValues: [],
          ebrSegmentOptions: [],
          ebrSegmentValues: [],
          soldToName: [],
          endCustomerName: [],
//          soldToNameValue: '',
//          endCustomerNameValue: '',
        },
        deviceModel: {
          finalBuOptions: [],
          finalBuValues: [],
          smbSeriesOptions: [],
          smbSeriesValues: [],
        },
        other: {
          priceBandOptions: [],
          priceBandValues: [],
          warrantyMonthOptions: [],
          warrantyMonthValues: [],
          subFormFactorOptions: [],
          subFormFactorValues: [],
          brandOptions: [],
          brandValues: [],
          formFactorOptions: [],
          formFactorValues: [],
        },
        echartsDom: {
          chartRange: null,
          chartQuarter: null
        },
        echartsDatas: {
          chartRange: {
            name: [],
            chartRangeOne: {},
            chartRangeTwo: {},
          },
          chartQuarter: {
            name: [],
            chartQuarterOne: {},
            chartQuarterTwo: {},
          },
        },
        optionColors: ['#4DCFA3', '#F5A623'],
        loading: {
          chartRange: false,
          chartQuarter: false
        },
        timeButton: true,
        timeRange: [],
        shijianfangwei1: 2015,
        shijianfangwei2: 2018,
        qshijian: 2018,

        selectTime1: '',
        selectTime2: ''
      }
    },
    props: {
      isFamily: {
        type: Number,
        default: 0
      }
    },
    methods: {
      getInputData1(val){
        this.locationBp.soldToName = val
      },
      getInputData2(val){
        this.locationBp.endCustomerName = val
      },
      clearFamilyValue1(){
        this.familyValue1 = '';
      },
      clearFamilyValue2(){
        this.familyValue2 = '';
      },
      confirmData(){
        const _this = this;
        let params = {};
        if (this.isFamily === 0) {
          if (this.familyValue1 === '' && this.familyValue2 === '') {
            alert(this.$t('productLifeCycle.AddQueryObject'));
            return;
          }
          params = {
            family: this.familyArr,
            family_shipment: this.familyShipmentArr,
            cpu_vendor: this.configuration.cpuVendorValues,
            cpu_series: this.configuration.cpuSeriesValues,
            memory_capacity: this.configuration.memoryCapacityValues,
            os_family: this.configuration.osFamilyValues,
            storage_type: this.configuration.storageTypeValues,
            hdd_capacity: this.configuration.hddCapacityValues,
            ssd_capacity: this.configuration.ssdCapacityValues,
            panel_size: this.configuration.panelSizeValues,
            panel_aspect_ratio: this.configuration.panelAspectRatioValues,
            panel_resolution: this.configuration.panelResolutionValues,

            geo: this.locationBp.geoValues,
            smb_region: this.locationBp.smbRegionValues,
            ebr_region: this.locationBp.ebrRegionValues,
            country: this.locationBp.countryValues,
            country_name: this.locationBp.countryNameValues,
            smb_segment: this.locationBp.smbSegmentValues,
            ebr_segment: this.locationBp.ebrSegmentValues,
//                  sold_to_name: [this.locationBp.soldToNameValue],
//                  end_customer_name: [this.locationBp.endCustomerNameValue],
            sold_to_name: this.locationBp.soldToName,
            end_customer_name: this.locationBp.endCustomerName,
            channel: this.locationBp.channelValues,
//                  locationBp.endCustomerNameValue
//
            final_bu: this.deviceModel.finalBuValues,
            smb_series: this.deviceModel.smbSeriesValues,
//
            brand: this.other.brandValues,
            form_factor: this.other.formFactorValues,
            sub_form_factor: this.other.subFormFactorValues,
            price_band: this.other.priceBandValues,
            warranty_month: this.other.warrantyMonthValues
          };
        } else {
          //如果isFamily===1;
        }
        this.$emit('getSelectData', params)
      },
      clearAll(){
        this.configuration.cpuVendorValues = [];
        this.configuration.cpuSeriesValues = [];
        this.configuration.memoryCapacityValues = [];
        this.configuration.osFamilyValues = [];
        this.configuration.storageTypeValues = [];
        this.configuration.hddCapacityValues = [];
        this.configuration.ssdCapacityValues = [];
        this.configuration.panelSizeValues = [];
        this.configuration.panelAspectRatioValues = [];
        this.configuration.panelResolutionValues = [];

        this.locationBp.geoValues = [];
        this.locationBp.smbRegionValues = [];
        this.locationBp.ebrRegionValues = [];
        this.locationBp.countryValues = [];
        this.locationBp.countryNameValues = [];
        this.locationBp.smbSegmentValues = [];
        this.locationBp.ebrSegmentValues = [];
        this.locationBp.soldToNameValue = '';
        this.locationBp.endCustomerNameValue = '';
        this.locationBp.channelValues = [];
//
        this.deviceModel.finalBuValues = [];
        this.deviceModel.smbSeriesValues = [];
//
        this.other.brandValues = [];
        this.other.formFactorValues = [];
        this.other.subFormFactorValues = [];
        this.other.priceBandValues = [];
        this.other.warrantyMonthValues = [];
        this.loadConfigurationData();
        this.loadLocationBpData();
        this.loadDeviceModelData();
        this.loadOtherData();
      },
      //当某一个筛选框改变时，跳过重新渲染该字段的数据
      addProducts(){
        if (this.addFlag === 5) {
          return;
        }
        this.addFlag += 1;
      },
      async cpuVendorChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
//            &&_this.configuration.panelResolutionValues.length===0
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async storageTypeChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async ssdCapacityChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async panelResolutionChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
//            &&_this.configuration.cpuVendorValues.length===0
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async osFamilyChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async hddCapacityChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async cpuSeriesChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async panelAspectRatioChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.panel_aspect_ratio) {
//                  _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async memoryCapacityChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.memory_capacity) {
//                  _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async panelSizeChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.panel_size) {
//                  _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
          }
        } catch (e) {
          console.log(e);
        }
      },

      async geoChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,

          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,

          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
//                if (resData.data.geo) {
//                  _this.locationBp.geoOptions = resData.data.geo.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name);
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              });
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async countryChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
//            if (resData.data.geo) {
//              _this.locationBp.geoOptions = resData.data.geo.map(item => {
//                return {value: item, label: item}
//              })
//            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async ebrRegionChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.ebr_region) {
//                  _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async smbSegmentChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.smb_segment) {
//                  _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async smbRegionChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.smb_region) {
//                  _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async countryNameChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.country_name) {
//            let a=new Set(resData.data.country_name)
//            let newArr = Array.from(a);
//            _this.locationBp.countryNameOptions = newArr.map(item => {
//              return {value: item, label: item}
//            })
//          }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async channelChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.channel) {
//                  _this.locationBp.channelOptions = resData.data.channel.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async ebrSegmentChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.ebr_segment) {
//                  _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
          }
        } catch (e) {
          console.log(e);
        }
      },
      //两个input的change事件
      async soldToNameChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
      },
      async endCustomerNameChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
      },

      async finalBuChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/deviceModel', params);
          let resData = res.data;
          if (resData.status === 200) {
//                if (resData.data.final_bu) {
//                  _this.deviceModel.finalBuOptions = resData.data.final_bu.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.smb_series) {
              _this.deviceModel.smbSeriesOptions = resData.data.smb_series.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },
      async smbSeriesChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/deviceModel', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.final_bu) {
              _this.deviceModel.finalBuOptions = resData.data.final_bu.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.smb_series) {
//                  _this.deviceModel.smbSeriesOptions = resData.data.smb_series.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
          }
        } catch (e) {
        }
      },

      async priceBandChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/other', params);
          let resData = res.data;
          if (resData.status === 200) {
//                if (resData.data.price_band) {
//                  _this.other.priceBandOptions = resData.data.price_band.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.warranty_month) {
              _this.other.warrantyMonthOptions = resData.data.warranty_month.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.sub_form_factor) {
              _this.other.subFormFactorOptions = resData.data.sub_form_factor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.brand) {
              _this.other.brandOptions = resData.data.brand.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.form_factor) {
              _this.other.formFactorOptions = resData.data.form_factor.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },
      async warrantyMonthChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/other', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.price_band) {
              _this.other.priceBandOptions = resData.data.price_band.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.warranty_month) {
//                  _this.other.warrantyMonthOptions = resData.data.warranty_month.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.sub_form_factor) {
              _this.other.subFormFactorOptions = resData.data.sub_form_factor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.brand) {
              _this.other.brandOptions = resData.data.brand.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.form_factor) {
              _this.other.formFactorOptions = resData.data.form_factor.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },
      async subFormFactorChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/other', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.price_band) {
              _this.other.priceBandOptions = resData.data.price_band.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.warranty_month) {
              _this.other.warrantyMonthOptions = resData.data.warranty_month.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.sub_form_factor) {
//                  _this.other.subFormFactorOptions = resData.data.sub_form_factor.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.brand) {
              _this.other.brandOptions = resData.data.brand.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.form_factor) {
              _this.other.formFactorOptions = resData.data.form_factor.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },
      async brandChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/other', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.price_band) {
              _this.other.priceBandOptions = resData.data.price_band.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.warranty_month) {
              _this.other.warrantyMonthOptions = resData.data.warranty_month.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.sub_form_factor) {
              _this.other.subFormFactorOptions = resData.data.sub_form_factor.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.brand) {
//                  _this.other.brandOptions = resData.data.brand.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
            if (resData.data.form_factor) {
              _this.other.formFactorOptions = resData.data.form_factor.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },
      async formFactorChange(){
        let _this = this;
        let params = {
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/other', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.price_band) {
              _this.other.priceBandOptions = resData.data.price_band.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.warranty_month) {
              _this.other.warrantyMonthOptions = resData.data.warranty_month.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.sub_form_factor) {
              _this.other.subFormFactorOptions = resData.data.sub_form_factor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.brand) {
              _this.other.brandOptions = resData.data.brand.map(item => {
                return {value: item, label: item}
              })
            }
//                if (resData.data.form_factor) {
//                  _this.other.formFactorOptions = resData.data.form_factor.map(item => {
//                    return {value: item, label: item}
//                  })
//                }
          }
        } catch (e) {
        }
      },

      familyChange1(val){
        let chooseValue = val.value;
        this.familyOptions2 = this.shipmentFamilyAllOptions.filter(item => {
          return item.value !== chooseValue;
        });
      },
      familyChange2(val){
        let chooseValue = val.value;
        this.familyOptions1 = this.shipmentFamilyAllOptions.filter(item => {
          return item.value !== chooseValue;
        });
      },
      removeFamily(){
        this.familyAllOptions=[...this.familyAllOptions2];
        for (let i = 0; i < this.familyValues.length; i++) {
          this.familyAllOptions=this.familyAllOptions.filter(item=>{
            return item.value!==this.familyValues[i]
          });
        }
      },
      familyChange3(val){
        this.familyValues.splice(0, 1, val);
        this.removeFamily();
      },
      familyChange4(val){
        this.familyValues.splice(1, 1, val);
        this.removeFamily();
      },
      familyChange5(val){
        this.familyValues.splice(2, 1, val);
        this.removeFamily();
      },
      familyChange6(val){
        this.familyValues.splice(3, 1, val);
        this.removeFamily();
      },
      familyChange7(val){
        this.familyValues.splice(4, 1, val);
        this.removeFamily();
      },

      async loadFamilyData(){
        let _this = this;
        let params = {
          family_flag: this.isFamily
        };
        let res = await this.axios.post('/product/dropselect/family', params);
        let resData = res.data;
        if (resData.status === 200) {
          if (this.isFamily === 1) {
            let arr = [];
            for (let key in resData.data) {
              arr.push({value: key, label: key})
            }
            _this.familyAllOptions = [...arr];
            _this.familyAllOptions2 = [...arr];
          } else {
            let arr = [];
            for (let key in resData.data) {
              arr.push({value: key, label: resData.data[key]})
            }
            _this.shipmentFamilyAllOptions = arr;
            this.familyOptions1 = [..._this.shipmentFamilyAllOptions];
            this.familyOptions2 = [..._this.shipmentFamilyAllOptions];
          }
        }
      },
      async loadConfigurationData(){
        let _this = this;
        let params = {
          family: this.familyArr,
          family_shipment: this.familyShipmentArr,
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/configuration', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.cpu_vendor) {
              _this.configuration.cpuVendorOptions = resData.data.cpu_vendor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.storage_type) {
              _this.configuration.storageTypeOptions = resData.data.storage_type.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ssd_capacity) {
              _this.configuration.ssdCapacityOptions = resData.data.ssd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_resolution) {
              _this.configuration.panelResolutionOptions = resData.data.panel_resolution.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.os_family) {
              _this.configuration.osFamilyOptions = resData.data.os_family.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.hdd_capacity) {
              _this.configuration.hddCapacityOptions = resData.data.hdd_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.cpu_series) {
              _this.configuration.cpuSeriesOptions = resData.data.cpu_series.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_aspect_ratio) {
              _this.configuration.panelAspectRatioOptions = resData.data.panel_aspect_ratio.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.memory_capacity) {
              _this.configuration.memoryCapacityOptions = resData.data.memory_capacity.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.panel_size) {
              _this.configuration.panelSizeOptions = resData.data.panel_size.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadLocationBpData(){
        let _this = this;
        let params = {
          family: this.familyArr,
          family_shipment: this.familyShipmentArr,
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/locationAndBp', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.geo) {
              _this.locationBp.geoOptions = resData.data.geo.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country) {
              _this.locationBp.countryOptions = resData.data.country.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_region) {
              _this.locationBp.ebrRegionOptions = resData.data.ebr_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_segment) {
              _this.locationBp.smbSegmentOptions = resData.data.smb_segment.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_region) {
              _this.locationBp.smbRegionOptions = resData.data.smb_region.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.country_name) {
              let a = new Set(resData.data.country_name)
              let newArr = Array.from(a);
              _this.locationBp.countryNameOptions = newArr.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.channel) {
              _this.locationBp.channelOptions = resData.data.channel.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.ebr_segment) {
              _this.locationBp.ebrSegmentOptions = resData.data.ebr_segment.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadDeviceModelData(){
        let _this = this;
        let params = {
          family: this.familyArr,
          family_shipment: this.familyShipmentArr,
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/deviceModel', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.final_bu) {
              _this.deviceModel.finalBuOptions = resData.data.final_bu.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.smb_series) {
              _this.deviceModel.smbSeriesOptions = resData.data.smb_series.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },
      async loadOtherData(){
        let _this = this;
        let params = {
          family: this.familyArr,
          family_shipment: this.familyShipmentArr,
          cpu_vendor: this.configuration.cpuVendorValues,
          cpu_series: this.configuration.cpuSeriesValues,
          memory_capacity: this.configuration.memoryCapacityValues,
          os_family: this.configuration.osFamilyValues,
          storage_type: this.configuration.storageTypeValues,
          hdd_capacity: this.configuration.hddCapacityValues,
          ssd_capacity: this.configuration.ssdCapacityValues,
          panel_size: this.configuration.panelSizeValues,
          panel_aspect_ratio: this.configuration.panelAspectRatioValues,
          panel_resolution: this.configuration.panelResolutionValues,

          geo: this.locationBp.geoValues,
          smb_region: this.locationBp.smbRegionValues,
          ebr_region: this.locationBp.ebrRegionValues,
          country: this.locationBp.countryValues,
          country_name: this.locationBp.countryNameValues,
          smb_segment: this.locationBp.smbSegmentValues,
          ebr_segment: this.locationBp.ebrSegmentValues,
          sold_to_name: this.locationBp.soldToName,
          end_customer_name: this.locationBp.endCustomerName,
          channel: this.locationBp.channelValues,
//
          final_bu: this.deviceModel.finalBuValues,
          smb_series: this.deviceModel.smbSeriesValues,
//
          brand: this.other.brandValues,
          form_factor: this.other.formFactorValues,
          sub_form_factor: this.other.subFormFactorValues,
          price_band: this.other.priceBandValues,
          warranty_month: this.other.warrantyMonthValues
        };
        try {
          let res = await _this.axios.post('/product/dropselect/other', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.price_band) {
              _this.other.priceBandOptions = resData.data.price_band.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.warranty_month) {
              _this.other.warrantyMonthOptions = resData.data.warranty_month.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.sub_form_factor) {
              _this.other.subFormFactorOptions = resData.data.sub_form_factor.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.brand) {
              _this.other.brandOptions = resData.data.brand.map(item => {
                return {value: item, label: item}
              })
            }
            if (resData.data.form_factor) {
              _this.other.formFactorOptions = resData.data.form_factor.map(item => {
                return {value: item, label: item}
              })
            }
          }
        } catch (e) {
        }
      },

      conditionIsShowChange(){
        this.conditionIsShow = !this.conditionIsShow;
//        if (this.conditionIsShow && this.vsIsShow) {
//          this.vsIsShow = !this.vsIsShow
//        }
      },
      vsIsShowChange(){
        if (this.vsIsShow) {
          this.familyValue2 = ''
        }
        this.vsIsShow = !this.vsIsShow;
//        if (this.conditionIsShow && this.vsIsShow) {
//          this.conditionIsShow = !this.conditionIsShow;
//        }
//            this.loadAllEchartsDatas()
      },
    },
    components: {
      mySelect,
      myInput
    },
    computed: {
      chooseValues(){
        return [this.familyValue3, this.familyValue4, this.familyValue5, this.familyValue6, this.familyValue7,]
      }
    },
    watch: {
      familyValue1: function (newVal, oldVal) {
        let _this = this;
        this.configuration.cpuVendorValues = [];
        this.configuration.cpuSeriesValues = [];
        this.configuration.memoryCapacityValues = [];
        this.configuration.osFamilyValues = [];
        this.configuration.storageTypeValues = [];
        this.configuration.hddCapacityValues = [];
        this.configuration.ssdCapacityValues = [];
        this.configuration.panelSizeValues = [];
        this.configuration.panelAspectRatioValues = [];
        this.configuration.panelResolutionValues = [];

        this.locationBp.geoValues = [];
        this.locationBp.smbRegionValues = [];
        this.locationBp.ebrRegionValues = [];
        this.locationBp.countryValues = [];
        this.locationBp.countryNameValues = [];
        this.locationBp.smbSegmentValues = [];
        this.locationBp.ebrSegmentValues = [];
        this.locationBp.soldToNameValue = '';
        this.locationBp.endCustomerNameValue = '';
        this.locationBp.channelValues = [];
//
        this.deviceModel.finalBuValues = [];
        this.deviceModel.smbSeriesValues = [];
//
        this.other.brandValues = [];
        this.other.formFactorValues = [];
        this.other.subFormFactorValues = [];
        this.other.priceBandValues = [];
        this.other.warrantyMonthValues = [];
        this.familyOptions2 = this.shipmentFamilyAllOptions.filter(item => {
          return item.value !== newVal;
        });
        _this.shipmentFamilyAllOptions.forEach(item => {
          if (item.value === newVal) {
            this.familyArr = this.familyArr.filter(item => {
              return item !== oldVal;
            });
            this.familyShipmentArr = this.familyShipmentArr.filter(item => {
              return item !== oldVal;
            });
            if (parseInt(item.label) === 0) {
              this.familyArr.unshift(newVal)
            } else {
              this.familyShipmentArr.unshift(newVal)
            }
          } else {
            this.familyArr = this.familyArr.filter(item => {
              return item !== oldVal;
            });
            this.familyShipmentArr = this.familyShipmentArr.filter(item => {
              return item !== oldVal;
            });
            //查找oldval，替换掉,或者直接alert,或者查找all里没有数据的话，直接报错，不让更改
          }
        });
        setTimeout(() => {
          this.loadConfigurationData();
          this.loadLocationBpData();
          this.loadDeviceModelData();
          this.loadOtherData();
        }, 0)
      },
      familyValue2: function (newVal, oldVal) {
        let _this = this;
        this.configuration.cpuVendorValues = [];
        this.configuration.cpuSeriesValues = [];
        this.configuration.memoryCapacityValues = [];
        this.configuration.osFamilyValues = [];
        this.configuration.storageTypeValues = [];
        this.configuration.hddCapacityValues = [];
        this.configuration.ssdCapacityValues = [];
        this.configuration.panelSizeValues = [];
        this.configuration.panelAspectRatioValues = [];
        this.configuration.panelResolutionValues = [];

        this.locationBp.geoValues = [];
        this.locationBp.smbRegionValues = [];
        this.locationBp.ebrRegionValues = [];
        this.locationBp.countryValues = [];
        this.locationBp.countryNameValues = [];
        this.locationBp.smbSegmentValues = [];
        this.locationBp.ebrSegmentValues = [];
        this.locationBp.soldToNameValue = '';
        this.locationBp.endCustomerNameValue = '';
        this.locationBp.channelValues = [];
//
        this.deviceModel.finalBuValues = [];
        this.deviceModel.smbSeriesValues = [];
//
        this.other.brandValues = [];
        this.other.formFactorValues = [];
        this.other.subFormFactorValues = [];
        this.other.priceBandValues = [];
        this.other.warrantyMonthValues = [];
        this.familyOptions1 = this.shipmentFamilyAllOptions.filter(item => {
          return item.value !== newVal;
        });
        _this.shipmentFamilyAllOptions.forEach(item => {
          if (item.value === newVal) {
            this.familyArr = this.familyArr.filter(item => {
              return item !== oldVal;
            });
            this.familyShipmentArr = this.familyShipmentArr.filter(item => {
              return item !== oldVal;
            });
            if (parseInt(item.label) === 0) {
              this.familyArr.push(newVal)
            } else {
              this.familyShipmentArr.push(newVal)
            }
          } else {
            this.familyArr = this.familyArr.filter(item => {
              return item !== oldVal;
            });
            this.familyShipmentArr = this.familyShipmentArr.filter(item => {
              return item !== oldVal;
            });
            //查找oldval，替换掉,或者直接alert,或者查找all里没有数据的画，直接报错，不让更改
          }
        });
        setTimeout(() => {
          this.loadConfigurationData();
          this.loadLocationBpData();
          this.loadDeviceModelData();
          this.loadOtherData();
        }, 0)
      },
    },
    mounted(){
      this.loadFamilyData();
      this.loadConfigurationData();
      this.loadLocationBpData();
      this.loadDeviceModelData();
      this.loadOtherData();
    }
  }
</script>

<style lang="scss" scoped>
  .top-select {
    height: 100%;
    .product-header {
      overflow: visible;
      .condition-header {
        .condition-header-right {
          .select-one, .select-two-vs {
            width: 200px;
          }
          .select-box {
            width: 150px;
            margin-right: 10px;
          }
          .my-select {
            width: 100%;
          }
          .el-autocomplete {
            width: 150px;
            margin-right: 10px;
            .el-input__icon {
              display: none;
            }
            &:hover .el-input__icon {
              display: block;
            }
          }
        }
        /*.condition-header-right {*/
        /*.select-one {*/
        /*!*width: 200px;*!*/
        /*!*height: 40px;*!*/
        /*!*.mul-select {*!*/
        /*!*width: 100%;*!*/
        /*!*}*!*/
        /*}*/
        /*}*/
      }
      .condition-box {
        .el-row {
          .el-col-3 {
            position: relative;
            top: 10px;
          }
        }
        .el-select {
          margin-bottom: 10px;
        }
        .el-input {
          margin-bottom: 10px;
        }
        .my-input {
          width: 100%;
          height: 40px;
        }
      }
      .footer-icon {
        padding-bottom: 8px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-family: MicorsoftYaHei;
        color: #333;
      }
    }
  }
</style>
